<template>
  <div class="full">
    <div class="title">
      <span class="iconfont iconshexiangtou"></span>
      <span>视频监控</span>
    </div>
    <div class="equipment betweenbox">
      <div class="equipment-left">
        <Left
          @handleNodeClick="handleNodeClick"
          @openClickEvent="openClickEvent"
          @setControl="setControl"
          @setControlJqr="setControlJqr"
          @setWindow="setWindow"
          @toYzw="toYzw"
          @setYzw="setYzw"
          ref="left"
        />
      </div>
      <div class="equipment-right">
        <Right ref="right" />
      </div>
    </div>
    <el-dialog
      title="设备全景·告警弹窗"
      :visible.sync="videoStatus"
      width="50%"
      :before-close="handleClose"
    >
      <videoPopUp v-if="videoStatus" :videoData="videoData" :listData="listData" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import Left from "./modules/Left/index.vue";
import Right from "./modules/Right/index.vue";
import videoPopUp from "@/components/alarmVideoPopup/alarmVideoPopup.vue";
import filtertime from "@/utils/time.js";
@Component({
  components: { Left, Right, videoPopUp },
})
export default class extends Vue {
  $refs!: {
    left: Left;
    right: Right;
  };
  setControlJqr(name) {
    let right = this.$refs.right;
    if (right) {
      right.setControlJqr(name);
    }
  }
  // 设置云台控制
  setControl(id) {
    let obj = {
      "01": "controlUpStart",
      "02": "controlUpStop",
      "03": "controlDownStart",
      "04": "controlDownStop",
      "05": "controlLeftStart",
      "06": "controlLeftStop",
      "07": "controlRightStart",
      "08": "controlRightStop",
      "09": "controlZoomInStart",
      "10": "controlZoomInStop",
      "11": "controlZoomOutStart",
      "12": "controlZoomOutStop",
      "13": "controlFocusNearStart",
      "14": "controlFocusNearStop",
      "15": "controlFocusFarStart",
      "16": "controlFocusFarStop",
      "17": "controlIrisOpenStart",
      "18": "controlIrisOpenStop",
      "19": "controlIrisCloseStart",
      "20": "controlIrisCloseStop",
    };
    let right = this.$refs.right;
    if (right) {
      let PreviewOCX = right.PreviewOCX;
      let callback = PreviewOCX[obj[id]];
      if (callback) {
        callback.call(PreviewOCX);
      }
    }
  }
  // 设置预置位
  setYzw(yzwbm) {
    console.log(yzwbm);
    let right = this.$refs.right;
    if (right) {
      right.setYzw(yzwbm);
    }
  }
  //   窗口设置
  // 跳转预置位
  toSbqjYzw(data) {
    // console.log(data);
    let id = data.id || "";
    let reg = /yzw#(\d+)#/g;
    let exec = reg.exec(id);
    let yzwbm = RegExp.$1;
    let right = this.$refs.right;
    if (right) {
      let PreviewOCX = right.PreviewOCX;
      right.ptzGetPoint(yzwbm, PreviewOCX.PTZ_CMD_START);
    }
  }
  // 跳转预置位
  toYzw(data) {
    // console.log(data);
    let id = data.id || "";
    let yzwbm = id.split("#")[0];
    let right = this.$refs.right;
    if (right) {
      let PreviewOCX = right.PreviewOCX;
      right.ptzGetPoint(yzwbm, PreviewOCX.PTZ_CMD_START);
    }
  }
  //   窗口设置
  setWindow(num) {
    let right = this.$refs.right;
    if (right) {
      let PreviewOCX = right.PreviewOCX;
      if (PreviewOCX.setWindowsLayout) {
        PreviewOCX.setWindowsLayout(num);
      }
    }
  }
  // 设置播放数据
  setPreview(arr) {
    // console.log(arr);
    if (arr && arr.length) {
      let stationId = arr[0].stationId;
      let data = {
        stationId,
        list: arr,
      };
      this.$refs.right.shipinData = data;
    }
  }
  handleNodeClick(data) {
    // 如果是设备全景的树突双击
    if (data.myCj === "sbqj") {
      // 如果是视频节点
      if (data.type === "video") {
        this.dbClickVideo(data, this.setPreview);
        return false;
      }
      // 如果是点位节点
      if (data.type === "point") {
        this.setPointData(data, this.setPreview);
        return false;
      }
    }
    // 如果是实时监控的树突双击
    if (data.myCj === "ssjc") {
      // 如果是变电站节点
      if (data.type === "bdz") {
        this.dbclickNode(data.id, data.type, this.setPreview);
      }
      // 如果是视频节点
      if (data.type === "video") {
        console.log(data)
        this.setSSjcPointData(data, this.setPreview);
      }
      return false;
    }
    // 如果是机器人的树突双击
    if (data.myCj === "jqr") {
      // 如果是变电站节点
      if (data.type === "bdz") {
        this.dbclickJqrNode(data.id, data.type, this.setPreview);
      }
      // 如果是视频节点
      if (data.type === "video") {
        this.setSSjcPointData(data, this.setPreview);
      }
      return false;
    }
  }
  // 设置点位视频数据
  setPointData(item, cb) {
    let reg = /indexcode#(\d+)#/g;
    let exec = reg.exec(item.id);
    let indexCode = RegExp.$1;
    let regYzw = /yzw#(\d+)#/g;
    let execYzw = regYzw.exec(item.id);
    let yzwbm = RegExp.$1;
    let data = [
      {
        stationId: item.myBdzId,
        indexCode: indexCode,
        yzwbm: yzwbm,
      },
    ];
    if (cb) {
      cb(data);
    }
  }
  // 设置点位视频数据
  setSSjcPointData(item, cb) {
    let id = item.id || "";
    let indexCode = id.split("#")[0];
    let robotid=item.robotid
    let data = [
      {
        stationId: item.myBdzId,
        indexCode: indexCode,
        robotid,
      },
    ];
    if (cb) {
      cb(data);
    }
  }
  // 事件打开
  openClickEvent(id) {
    this.jumpToStory(id, this.setPreview);
  }
  // 获取事件视频数据
  jumpToStory(id, cb) {
    let parmas = {
      storyId: id,
    };
    (this as any).$services
      .jumpToStory({ data: parmas })
      .then((result: any) => {
        // console.log(result);
        let data = result.data || [];
        let arr = data.map((v) => {
          return {
            stationId: v.BDZID,
            indexCode: v.INDEXCODE,
          };
        });
        if (cb) {
          cb(arr);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 设备全景双击设备获取摄像头播放列表
  dbClickVideo(item, cb) {
    let data = {
      id: item.id,
    };
    (this as any).$services
      .dbClickVideo({ data })
      .then((result: any) => {
        let data = result.data || [];
        if (data.length) {
          let arr = data.map((v) => {
            return {
              stationId: item.myBdzId,
              indexCode: v.INDEXCODE,
            };
          });
          if (cb) {
            cb(arr);
          }
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 实时监控双击变电站/设备打开视频
  dbclickNode(id, type, cb) {
    let data = {
      id,
      type,
    };
    (this as any).$services
      .dbclickNode({ data })
      .then((result: any) => {
        let arr = result.data || [];
        arr = arr.map((v) => {
          return {
            stationId: v.STATIONID,
            indexCode: v.INDEXCODE,
          };
        });
        if (cb) {
          cb(arr);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 机器人双击变电站/设备打开视频
  dbclickJqrNode(id, type, cb) {
    let data = {
      id,
      type,
      xh:'jqr'
    };
    (this as any).$services
      .dbclickNode({ data })
      .then((result: any) => {
        let arr = result.data || [];
        arr = arr.map((v) => {
          return {
            stationId: v.STATIONID,
            indexCode: v.INDEXCODE,
          };
        });
        if (cb) {
          cb(arr);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // -------------------------------告警弹窗相关---------------------
  videoStatus = false;
  videoData = [];
  listData = [];
  // timer = null;
  apitime = ""; //给视频用的 对比完更新的时间
  firsttime = ""; //给列表用的 第一次返回的时间
  num = 0;
  tabid = this.$refs && this.$refs.left && this.$refs.left.tabId;
  @Watch("$route", { immediate: true, deep: true })
  public openAlarmPopup(to: any, from: any) {
    if (to.name == "EquipmentPanoramic") {
      this.apitime = this.apitime
        ? filtertime(this.apitime)
        : filtertime(new Date());
      var timer = setInterval(() => {
        this.getAlarmInfo();
        this.num++;
      }, 60000);
      this.$once("hook:beforeDestroy", () => {
        clearInterval(timer);
      });
    } else {
      this.num = 0;
      this.videoData = [];
      this.listData = [];
      this.apitime = "";
      this.videoStatus = false;
    }
  }

  handleClose() {
    this.num = 0;
    this.videoData = [];
    this.listData = [];
    this.videoStatus = false;
  }
  // 获取视频报警信息
  getAlarmInfo() {
    // time:  "2019-11-08 16:53:32"
    // console.log(this.apitime);
    (this as any).$services
      .getAlarmInfo({ data: { time: this.apitime } })
      .then((result: any) => {
        if (result.data && result.data.length) {
          // console.log(111, result);
          // 1.弹出弹框
          this.videoStatus = true;
          // 2.存好监测时间 对比一下
          var time1 = this.apitime;
          var time2 = result.data[0].JCJS;
          if (time1 < time2) {
            this.apitime = result.data[0].JCJS;
            // 3.调getVideoInfo和getAlarmList
            this.getVideoInfo(result.data[0]); //alarmId和stationId
            if (this.num == 1) {
              this.firsttime = result.data[0].JCJS;
              this.getAlarmList(this.firsttime); //第一次返回的时间
            } else {
              this.getAlarmList(this.firsttime); //第一次返回的时间
            }
          }
        } else {
          return;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 获取告警信息列表
  getAlarmList(val) {
    (this as any).$services
      .getAlarmList({ data: { time: this.apitime } })
      .then((result: any) => {
        if (result.data) {
          this.listData = [...this.listData, ...result.data];
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 获取告警的摄像头信息
  getVideoInfo(val) {
    var params = {
      alarmId: val.ALARMID,
      stationId: val.BDZID,
    };
    (this as any).$services
      .getVideoInfo({ data: params })
      .then((result: any) => {
        if (result.data) {
          this.videoData = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  mounted() {
    // this.tabid = this.$refs.left.tabId
  }
}
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  height: 0.4rem;
  font-size: 0.18rem;
  line-height: 0.4rem;
  color: #fff;
  .icongeipaishui {
    margin-right: 0.1rem;
  }
}
.equipment {
  width: 100%;
  height: calc(100% - 0.4rem);
  &-left {
    width: 3.2rem;
    height: 100%;
  }
  &-right {
    width: calc(100% - 3.3rem);
    height: 100%;
  }
}
.iframe {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1;
  opacity: 0.1;
  background: none;
  pointer-events: none;
}
</style>